<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <style>
      .demo {
        margin-bottom: 20px;
        border: 1px solid #ebedf0;
        border-radius: 2px;
        padding: 10px;
      }
      .demo div {
        margin-bottom: 10px;
        font-size: 14px;
      }

      .pagination {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
        font-size: 14px;
        line-height: 1.5;
        list-style: none;
        display: inline-block;
      }
      .pagination.hide {
        display: none;
      }
      .pagination li {
        position: relative;
        display: inline-block;
        float: left;
        height: 32px;
        margin: 0;
        padding: 0 15px;
        line-height: 30px;
        background: #fff;
        border: 1px solid #d9d9d9;
        border-top-width: 1.02px;
        border-left: 0;
        cursor: pointer;
        transition: color 0.3s, border-color 0.3s;
      }
      .pagination li:first-child {
        border-left: 1px solid #d9d9d9;
        border-radius: 4px 0 0 4px;
      }
      .pagination li:last-child {
        border-radius: 0 4px 4px 0;
      }
      .pagination li:first-child {
        box-shadow: none !important;
      }
      .pagination li.current {
        border-color: #1890ff;
        color: #1890ff;
        border-left: 1px solid #1890ff;
      }
      .pagination li.current:not(:first-child) {
        margin-left: -1px;
      }
    </style>
  </head>

  <body>
    <div>
      <div id="jsContainer">
        <ul class="pagination">
          <li>首页</li>
          <li>8</li>
          <li>9</li>
          <li class="current">10</li>
          <li>11</li>
          <li>12</li>
          <li>末页</li>
        </ul>
      </div>

      <div class="demo">
        <div>(Demo1) total: 10，current: 4</div>
        <ul class="pagination">
          <li>首页</li>
          <li>2</li>
          <li>3</li>
          <li class="current">4</li>
          <li>5</li>
          <li>6</li>
          <li>末页</li>
        </ul>
      </div>

      <div class="demo">
        <div>(Demo2) total: 0，current: 0</div>
        <ul class="pagination hide"></ul>
      </div>

      <div class="demo">
        <div>(Demo3) total: 3，current: 2</div>
        <ul class="pagination">
          <li>1</li>
          <li class="current">2</li>
          <li>3</li>
        </ul>
      </div>

      <div class="demo">
        <div>(Demo4) total: 10，current: 2</div>
        <ul class="pagination">
          <li>1</li>
          <li class="current">2</li>
          <li>3</li>
          <li>4</li>
          <li>5</li>
          <li>末页</li>
        </ul>
      </div>

      <div class="demo">
        <div>(Demo5) total: 10，current: 9</div>
        <ul class="pagination">
          <li>首页</li>
          <li>6</li>
          <li>7</li>
          <li>8</li>
          <li class="current">9</li>
          <li>10</li>
        </ul>
      </div>
      <!-- <div id="examId">
      </div> -->
    </div>
    <script type="text/javascript">
      function Pagination(container, total, current) {
        this.total = total
        this.current = current
        this.html = html
        this.val = val
        
        // 创建分页组件根节点，是创建一个新节点，不是获取已存在
        this.el = document.createElement('ul') //TODO: 创建分页组件根节点
        if (!this.el) return

        this.el.innerHTML = this.html()
        container.appendChild(this.el)
        this.el.className = this.total <= 1 ? 'hide' : 'pagination' //TODO: 判断是否需要隐藏当前元素
        function html() {
          // total <= 1 时，隐藏该组件（如demo2所示）
          if (this.total <= 1) return ''
          let head = `<li>首页</li>`
          let foot = `<li>末页</li>`
          let start = 1, end = total > 5 ? 5 :total
          let resHtml = ''
          
          if (current - 2 > 1 && current + 2 < total) {
            // 有首页有末页
            start = current - 2
            end = current + 2
          } else if (current - 2 > 1 && current + 2 >= total) {
            // 有首页无末页
            start = total - 4
            end = total
            foot = ''
          } else if (current - 2 <= 1 && current + 2 < total) {
            // 无头有尾
            start = 1
            end = 5
            head = ''
          } else {
          // 无头无尾
            start = 1
            end = total
            head = ''
            foot = ''
          }
          resHtml += head
          //TODO: 生成组件的内部html字符串
          for (; start <= end; start++) {
            resHtml += `<li ${this.current === start ? 'class="current"' : ''}>${start}</li>`
          }
          // 当current居中不足5页，向后(前)补足5页，隐藏“首页”(“末页”)元素(如demo4和demo5所示)
          resHtml += foot
          return resHtml
        }

        function val(current) {
          if (arguments.length === 0) return this.current
          if (current < 1 || current > this.total || current === this.current)
            return
          this.current = current
          this.el.innerHTML = this.html()
        }
      }
      // window.onload = (function() {
      //   Pagination(document.querySelector('#examId'), 10, 9)
      // })()
    </script>
  </body>
</html>
